import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType } from 'graphql-anywhere';
import { ListItem } from 'react-native-elements';
import { primaryColor } from '../utils';

const CreditCardListItem = ({chinese, selectMode, select, onSelect, card}) => {
  const {id, brand, asteriskNumber, expireOn} = card;
  let icon = 'credit-card';
  if (brand==='Mstarcard') {
    icon = 'cc-mastercard';
  } else if (brand==='Visa') {
    icon = 'cc-visa';
  }

  return (
    <ListItem title={asteriskNumber} subtitle={selectMode?(chinese?'信用卡':'By Credit Card'):expireOn} leftIcon={{name:icon,type:'font-awesome'}} onPress={()=>onSelect(card)}
      rightIcon={selectMode?{name:select===id?'radio-button-checked':'radio-button-unchecked',color:select===id?primaryColor:undefined}:{name:'clear'}}/>
  );
}

CreditCardListItem.fragments = {
  card: gql`
    fragment CreditCardListItem on CreditCard {
      id
      brand
      asteriskNumber
      expireOn
    }
  `
};

CreditCardListItem.propTypes = {
  card: propType(CreditCardListItem.fragments.card).isRequired,
  select: PropTypes.string,
  onSelect: PropTypes.func
};

export default CreditCardListItem;
